<template>
    <div>
        <h3>我是setup函数：姓名是：{{ name }}</h3>
        ==========================================
        <div>
            <p>使用的是非响应式数据</p>
            <p>用户姓名是：{{user.name}}</p>
            <p>用户年龄是：{{age}}</p>
        </div>
        <button @click="changeUser">修改信息</button>
        <button @click="sendtoP">子传父</button>
    </div>
</template>

<script>
import { h } from "vue"
// console.log(h)
export default {
    // 组合api舞台
    async setup(props, ctx) {
        // 问题：this执行：
            // console.log(this)//undefined

        //参数问题：
            // 1.props:父亲传递的数据
                // console.log(props)
            // 2.ctx:组件的上下文环境 弥补了没有this问题，提供了attr、`slots`、emit
                // console.log(ctx) 

        //定义页面上需要的数据和方法  最后一定要return {}
            let age = 20//非响应式数据
            let user = { id: 1, name: "鲁班" }

            function changeUser() { 
                age = 30
                user.name = "李白"
            }

            //定义子传父方法
            function sendtoP() {
                ctx.emit('channel','传递数据了')
            }

            return {
                age,
                user,
                changeUser,
                sendtoP
            }

        // 直接返回渲染函数（dom节点  h函数） 了解
            return ()=>h('div','我是直接返回的节点标签')

    },
    // 接受父组件传递的数据
    props: ['name'],
    data() { 
        return {
            score:90
        }
    }
};
</script>

<style scoped></style>
